<template>
    <div class="score-query-page">
      <!-- 查询卡片 -->
      <el-card class="query-card">
        <el-form :inline="true" :model="form" ref="formRef">
          <el-form-item
            label="竞赛 ID"
            prop="contestId"
            :rules="[{ required: true, message: '请选择竞赛', trigger: 'change' }]"
          >
            <!-- 下拉框形式，也可改成 el-input -->
            <el-select
              v-model="form.contestId"
              placeholder="请选择竞赛"
              style="width: 220px"
              filterable
            >
              <!-- 示例静态数据，实际可替换为接口拉取 -->
              <el-option label="2025 校赛" value="c2025" />
              <el-option label="2024 校赛" value="c2024" />
            </el-select>
          </el-form-item>
  
          <el-form-item label="队伍 ID">
            <el-input
              v-model="form.teamId"
              placeholder="选填"
              style="width: 180px"
              clearable
            />
          </el-form-item>
  
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="handleQuery"
            >
              查询成绩
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 结果卡片 -->
      <el-card class="result-card">
        <el-table
          v-if="results.length"
          :data="results"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column prop="rank" label="排名" width="80" align="center" />
          <el-table-column prop="teamId" label="队伍 ID" width="120" />
          <el-table-column prop="teamName" label="队伍名称" width="180" />
          <el-table-column prop="topic" label="题目" width="80" align="center" />
          <el-table-column
            prop="averageScore"
            label="平均分"
            width="100"
            align="center"
          />
          <el-table-column
            prop="fullScore"
            label="满分值"
            width="100"
            align="center"
          />
        </el-table>
  
        <!-- 空状态 -->
        <el-empty
          v-else-if="!loading && !error"
          description="暂无查询结果"
        />
  
        <!-- 错误提示 -->
        <el-result
          v-if="error"
          icon="error"
          :title="error"
        />
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import service from '@/utils/request'
  
  const form = reactive({
    contestId: '',
    teamId: ''
  })
  const results = ref([])
  const loading = ref(false)
  const error = ref('')
  
  const handleQuery = async () => {
    if (!form.contestId) {
      ElMessage.warning('请选择竞赛 ID')
      return
    }
  
    loading.value = true
    error.value = ''
    results.value = []
  
    try {
      let url = `/contests/${form.contestId}/results`
      if (form.teamId.trim()) {
        url += `?teamId=${encodeURIComponent(form.teamId.trim())}`
      }
  
      const { data: res } = await service.get(url)
  
      if (res.code === 200) {
        results.value = res.data || []
        if (!results.value.length) {
          ElMessage.info('未查询到成绩')
        }
      } else {
        throw new Error(res.message || '查询失败')
      }
    } catch (e) {
      error.value = e?.response?.data?.message || e.message || '查询失败'
      ElMessage.error(error.value)
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped>
  .score-query-page {
    max-width: 900px;
    margin: 32px auto;
  }
  .query-card,
  .result-card {
    margin-bottom: 16px;
  }
  </style>